<html>
  <head>
    <title>My God, it's full of eyes!</title>
    <link rel="stylesheet" type="text/css" href="../ex.css"/>
    <script type="text/javascript" src="../../protovis.js"></script>
    <style type="text/css">

body {
  background: #222;
}

#fig {
  width: 200px;
  height: 200px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

var vis = new pv.Panel()
    .width(200)
    .height(200)
    .fillStyle("#666")
    .strokeStyle("#ccc");

vis.add(pv.Panel)
    .data([{x:50, y:16, r:40},
           {x:64, y:85, r:20},
           {x:90, y:200, r:60},
           {x:150, y:44, r:20},
           {x:175, y:120, r:40}])
    .left(function(d) d.x)
    .top(function(d) d.y)
  .add(pv.Dot)
    .left(0)
    .top(0)
    .fillStyle("#fff")
    .strokeStyle(null)
    .radius(function(d) d.r)
  .add(pv.Dot)
    .def("v", function(d) this.mouse().norm().times(d.r / 2))
    .fillStyle("#aaa")
    .left(function(d) this.v().x)
    .top(function(d) this.v().y)
    .radius(function(d) d.r / 2);

vis.render();

pv.listen(window, "mousemove", function() vis.render());

    </script>
  </div></div></body>
</html>
